<template>
  <div class="home-container">
    <div class="hero-section">
      <h1>人脸识别系统</h1>
      <p>基于图片的智能人脸识别解决方案</p>
      <div class="feature-cards">
        <router-link to="/register" class="card">
          <div class="card-icon register">👤</div>
          <h3>人脸注册</h3>
          <p>上传照片，快速注册用户人脸信息</p>
        </router-link>
        <router-link to="/recognize" class="card">
          <div class="card-icon recognize">🔍</div>
          <h3>人脸识别</h3>
          <p>上传照片进行身份验证，快速识别用户</p>
        </router-link>
        <router-link to="/users" class="card">
          <div class="card-icon users">📋</div>
          <h3>用户管理</h3>
          <p>查看和管理已注册的用户信息</p>
        </router-link>
      </div>
    </div>
    
    <div class="features-section">
      <h2>系统特点</h2>
      <div class="feature-list">
        <div class="feature-item">
          <div class="feature-icon">🚀</div>
          <div class="feature-text">
            <h4>高效便捷</h4>
            <p>基于图片的人脸识别，无需额外硬件设备</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🔒</div>
          <div class="feature-text">
            <h4>安全可靠</h4>
            <p>采用先进的人脸编码技术，保障身份验证安全</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">📱</div>
          <div class="feature-text">
            <h4>响应式设计</h4>
            <p>支持各种设备访问，提供良好的用户体验</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">⚡</div>
          <div class="feature-text">
            <h4>实时响应</h4>
            <p>快速处理人脸注册和识别请求</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Home组件逻辑
</script>

<style scoped>
.home-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-section {
  text-align: center;
  margin-bottom: 3rem;
}

.hero-section h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.hero-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #666;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.card-icon.register {
  color: #4CAF50;
}

.card-icon.recognize {
  color: #2196F3;
}

.card-icon.users {
  color: #FF9800;
}

.card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.card p {
  color: #666;
}

.features-section {
  margin-top: 4rem;
}

.features-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #333;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 8px;
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.feature-text h4 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.feature-text p {
  color: #666;
  margin: 0;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
  }
  
  .feature-list {
    grid-template-columns: 1fr;
  }
}
</style>